Cache compiled static assets in service worker #2272

hkarani · 2025-07-08T17:29:46Z

Description

A clear and concise description of what you changed and why.
This change patches the cached items array in the service worker at public/sw.js to include Next's compiled static assets emitted during build phase.

WHY?

The service worker ONLY includes the assets in precache-manifest.json injected by Workbox plugin when the Webpack build starts but our static assets only exist later in the build.

Static assets cannot be added in the server build , they are emitted in the client build phase(docs) and are not needed in dev.

However since the precache-manifest.json assets are hardcoded in an array in the generated service worker by Worbox in public/sw.js. We patch it to include our compiled assets after Next compiles and emits the files.

Screenshots

Where workbox stores the items in precache-manifest.json in Q=JSON.parse('the-precache-manifest.json') in the service worker.

Additional Context

Cached items are referenced as /_next/static/chunks/pages/offline-eb65c6c23790b89c.js" depending on the build version.

They static assets urls are formatted to be web urls for them to be accessible by the browser after caching.

Was anything unclear during your work on this PR? Anything we should definitely take a closer look at?

How to test a prod build?

Checklist

Are your changes backward compatible? Please answer below:

For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7

This change adds the cached static assets in .next/static folder to the service worker in public/sw.js. The changes can be replicated by running:

npm run build

then checking the changes of the public/sw.js in the editor just after Next completes the compilation phase.

To test dev build run:

npm run dev

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
This change will affect the cached offline page.

Did you introduce any new environment variables? If so, call them out explicitly here:
No

hkarani · 2025-07-09T13:20:48Z

@ekzyis I've implemented a new way to do this mainly because the service worker will only cache items in precache-manifest.json when the build starts, even updating precache-manifest.json mid-webpack build will still cache assets passed when webpack starts.